<template>
    <div>
        <el-form ref="ruleForm" :model="obj" :rules="rules">
            <el-row :gutter="1">
                <el-col :span="24">
                    <el-form-item label="文本 :" prop="text" :label-width="formLabelWidth2">
                        <el-input size="small" type="textarea" :rows="4" v-model="obj.text"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="24">
                    <el-form-item label="" :label-width="formLabelWidth2">
                        <el-button type="primary" size="small" @click="getTextHash">计算哈希</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="24">
                    <el-form-item label="哈希：" :label-width="formLabelWidth2" style="overflow-x: auto">
                        {{obj.textSha256}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="24">
                    <el-form-item label="" :label-width="formLabelWidth2">
                        <el-button type="primary" size="small" @click="qrCodeClick">哈希二维码</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="line"></div>
            <el-row :gutter="1">
                <el-col :span="24">
                    <el-form-item label="文件 :" :label-width="formLabelWidth2">
                        <!--<input type="file" name="file" id="file"/>-->


                        <el-upload
                            class="upload-demo"
                            ref="upload"
                            action="#"
                            :on-change="handleChange"
                            :on-remove="handleRemove"
                            :auto-upload="false">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        </el-upload>

                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="24">
                    <el-form-item label="" :label-width="formLabelWidth2">
                        <el-button type="primary" size="small" @click="getFileHash">计算哈希</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="24">
                    <el-form-item label="哈希 :" :label-width="formLabelWidth2" style="overflow-x: auto">
                        {{obj.fileSha256}}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="1">
                <el-col :span="24">
                    <el-form-item label="" :label-width="formLabelWidth2">
                        <el-button type="primary" size="small" @click="qrCodeClick1">哈希二维码</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-dialog
            title=""
            :visible.sync="qrCodeDialog"
            width="100%"
            :before-close="qrCodeContainerDestroy">
            <div v-if="qrCodeDestroy" style="display: flex; overflow: auto;">
                <div v-for="(item,index) in msgs" class="qrContainer">
                    <div :id="index" class="qrContent"></div>
                    <div class="qrSign">{{(index+1)+'/'+msgs.length}}</div>
                </div>
            </div>
        </el-dialog>
        <el-dialog
            title=""
            :visible.sync="qrCodeDialog1"
            width="100%"
            :before-close="qrCodeContainerDestroy1">
            <div v-if="qrCodeDestroy1" style="display: flex; overflow: auto;">
                <div v-for="(item,index) in msgs1" class="qrContainer">
                    <div :id="index" class="qrContent"></div>
                    <div class="qrSign">{{(index+1)+'/'+msgs1.length}}</div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import jsSHA256 from 'js-sha256';
    import cryptoJs from 'crypto-js';

    export default {
        name: 'hashCount',
        data() {
            return {
                formLabelWidth1: '60px',
                formLabelWidth2: '80px',
                formLabelWidth3: '100px',
                obj: {
                    text: '',
                    textSha256: '',
                    fileSha256: ''
                },
                rules: {
                    text: [
                        {required: true, message: '请输入文本', trigger: ['blur', 'change']}
                    ]
                },
                newAddress: '',
                qrCodeDialog: false,
                qrCodeDestroy: false,
                qrCodeDialog1: false,
                qrCodeDestroy1: false,
                fileData: null
            }
        },
        computed: {
            msgs() {
                let length = this.obj.textSha256.length;
                let num = Math.ceil(length / 200);
                let array = [];
                for (let i = 0; i < num; i++) {
                    let m = this.obj.textSha256.substring(i * 200, (i + 1) * 200);
                    array.push(m);
                }
                return array;
            },
            msgs1() {
                let length = this.obj.fileSha256.length;
                let num = Math.ceil(length / 200);
                let array = [];
                for (let i = 0; i < num; i++) {
                    let m = this.obj.fileSha256.substring(i * 200, (i + 1) * 200);
                    array.push(m);
                }
                return array;
            }
        },
        mounted() {

        },
        methods: {
            getTextHash() {
                this.$refs['ruleForm'].validate(async (valid) => {
                    if (valid) {
                        console.log(jsSHA256.sha256(this.obj.text));
                        this.obj.textSha256 = jsSHA256.sha256(this.obj.text);
                    } else {
                        return false;
                    }
                })
            },
            getFileHash() {
                let self = this;
                // let input = document.getElementById('file');
                // let file = input.files[0];
                let file = this.fileData;
                if (file) {
                    let reader = new FileReader();
                    reader.readAsArrayBuffer(file);
                    reader.onload = function () {
                        console.log(reader.result);
                        let wordArray = cryptoJs.lib.WordArray.create(reader.result);
                        let hash = cryptoJs.SHA256(wordArray).toString();
                        self.obj.fileSha256 = hash;
                    }
                } else {
                    this.$message.error('请先选择文件！');
                }
            },
            handleChange(file, fileList) {
                this.fileData = file.raw;
                if (fileList.length >= 2) {
                    fileList.shift();
                }
            },
            handleRemove(file, fileList){
                this.fileData = null;
            },
            qrCodeContainerDestroy() {
                this.qrCodeDestroy = false;
                this.qrCodeDialog = false;
            },
            qrCodeContainerDestroy1() {
                this.qrCodeDestroy1 = false;
                this.qrCodeDialog1 = false;
            },
            qrCodeClick() {
                if (this.obj.textSha256 === '') {
                    this.$message.error('请先计算哈希值！');
                    return;
                }
                this.qrCodeDialog = true;
                this.qrCodeDestroy = true;
                this.$nextTick(() => {
                    this.msgs.forEach((item, index) => {
                        let qrCode = new QRCode(document.getElementById(index), {
                            width: 200,
                            height: 200
                        });
                        qrCode.makeCode(JSON.stringify(item));
                    })
                });
            },
            qrCodeClick1() {
                if (this.obj.fileSha256 === '') {
                    this.$message.error('请先计算哈希值！');
                    return;
                }
                this.qrCodeDialog1 = true;
                this.qrCodeDestroy1 = true;
                this.$nextTick(() => {
                    this.msgs1.forEach((item, index) => {
                        let qrCode = new QRCode(document.getElementById(index), {
                            width: 200,
                            height: 200
                        });
                        qrCode.makeCode(JSON.stringify(item));
                    })
                });
            }
        }
    }
</script>

<style scoped lang="less">
    .qrContainer {
        display: inline-block;
    }

    .qrContent {
        display: inline-block;
        width: 200px;
        height: 200px;
        margin: 10px;
    }

    .qrSign {
        width: 200px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }

    .line {
        width: 100%;
        height: 5px;
        margin: 5px 0;
        background-color: #e4e7ed;
        z-index: 1;
    }
    /deep/ .el-upload-list__item{
        transition: none;
    }
</style>
